<template>
   <div class="system">
        <div class="header">
            <div class="nav">
                <el-button class="back" icon="el-icon-arrow-left" @click="$router.push('/statistic')">首页</el-button><span class="text">大数据统计分析系统</span>
            </div>
            <ul class="tabs">
                <router-link to="/statistic/user" tag="li">用户</router-link>
                <router-link to="/statistic/resources" tag="li">资源</router-link>
                <router-link to="/statistic/application" tag="li">应用</router-link>
                <router-link to="/statistic/research" tag="li">教研活动</router-link>
            </ul> 
        </div>
        <div class="home-main">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    name: 'system',
    data() {
        return {
        }
    },
    created() {
    },
}
</script>
<style lang="scss">
.system {
    position: relative;

    .header {
        position: relative;
        width: 100%;
        height: 120px;
        padding: 0 40px;
        background: #fff;
        box-sizing: border-box;

        .nav {
            display: flex;
            align-items: center;
            height: 60px;
            line-height: 60px;

            .back {
                padding: 0;
                width: 72px;
                height: 31px;
                line-height: 31px;
                font-size: 14px;
                color: #888;
                border-radius: 100px;
                margin-right: 13px;
            }

            .text {
                font-size: 20px;
                font-family: MicrosoftYaHei-Bold;
            }
        }

        .tabs {
            .router-link-active {
                background: #348EFC;
                color: #fff;
            }
        }

        .tabs li {
            display: inline-block;
            padding: 12px 15px;
            margin-right: 15px;
            border-radius: 10px;
            font-size: 18px;
            font-family: MicrosoftYaHei-Bold;
            cursor: pointer;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .home-main {
        .sizer {
            height: 82px;
            line-height: 82px;
            padding: 0 40px;
            background: #f3f3f3;

            .item {
                display: inline-block;
                margin-right: 20px;

                &:last-child {
                    margin-right: 0;
                }

                .el-select,
                .el-date-editor.el-input,
                .el-date-editor.el-input__inner {
                    width: 180px;
                }

                .el-date-editor.el-input__inner:last-child {
                    width: 250px;
                }

                .gap {
                    margin: 0 10px;
                    color: #979797;
                }

                .el-input__prefix {
                    right: 5px;
                }
            }
        }

        .pf {
            // max-width: 1400px;
            // margin: 0 auto;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(243,243,243,.9);
            z-index: 99;  
            height: auto;
            line-height: 60px;
        }

        main {
            margin: 0 auto;
            padding: 40px;
            max-width: 1400px;
            background-color: #242D41;

            .new-up,
            .up-user,
            .new-user,
            .access-top,
            .research-top {
                margin-top: 20px;
                overflow: hidden;
                background-color: #283656;

                .tabs {
                    padding-right: 58px;
                    text-align: right;
                    margin-bottom: 10px;

                    button {
                        background: none;
                        border-color: #348efc;
                        color: #348efc;
                        margin: 0;
                        padding: 7px 25px;
                        border-radius: 0;
                        border-right: 0;

                        &:last-child {
                            border-right: 1px solid #348efc;
                        }
                    }

                    .live {
                        background: #348efc;
                        color: #fff;
                    }
                }

                .data {
                    height: 500px;
                    margin: 0 56px 0 23px;

                    .line {
                        max-width: 100%;
                        height: 100%;
                    }
                }
            }

            .count,
            .app-count,
            .research-count {
                display: flex;

                .content-left {
                    margin-right: 20px;

                    .item {
                        width: 430px;
                        padding: 20px;
                        border-radius: 6px;
                        color: #fff;
                        margin-bottom: 10px;
                        box-sizing: border-box;

                        .title {
                            font-size: 16px;
                            margin-bottom: 24px;
                        }

                        .inner {
                            display: flex;
                            margin-bottom: 30px;

                            .inner-l {
                                position: relative;
                                flex: 1;
                                text-align: center;

                                .num {
                                    position: absolute;
                                    font-size: 36px;
                                    top: 50%;
                                    transform: translateY(-50%);
                                }
                            }

                            .inner-r {
                                flex: 0 0 142px;
                                text-align: center;
                            }
                        }
                    }

                    .count-child {
                        position: relative;
                        width: 430px;

                        .count-child-item {
                            display: inline-block;
                            width: 210px;
                            height: 160px;
                            padding: 20px;
                            margin-right: 10px;
                            margin-bottom: 10px;
                            border-radius: 6px;
                            color: #fff;
                            box-sizing: border-box;

                            &:nth-of-type(2n) {
                                margin-right: 0;
                            }

                            &:nth-last-of-type(1),
                            &:nth-last-of-type(2) {
                                margin-bottom: 0;
                            }

                            .title {
                                font-size: 14px;
                            }

                            .num {
                                font-size: 36px;
                                text-align: center;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }

                .content-right {
                    flex: 1;
                    background-color: #283656;

                    .tabs {
                        padding-right: 58px;
                        text-align: right;
                        margin-bottom: 10px;

                        button {
                            background: none;
                            border-color: #348efc;
                            color: #348efc;
                            margin: 0;
                            padding: 7px 25px;
                            border-radius: 0;
                            border-right: 0;

                            &:last-child {
                                border-right: 1px solid #348efc;
                            }
                        }
                            
                        .live {
                            background: #348efc;
                            color: #fff;
                        }
                    }

                    .data {
                        height: 495px;
                        margin: 0 56px 0 23px;

                        .line {
                            max-width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .platform,
            .task-count,
            .access-count,
            .src-up-count {
                position: relative;
                display: flex;
                width: 100%;
                height: 620px;
                margin-top: 20px;

                .content-left {
                    flex: 1;
                    background-color: #283656;
                }

                .content-right {
                    flex: 0 0 330px;
                    margin-left: 20px;
                    padding: 0 25px;
                    background-color: #283656;

                    .title-box {
                        padding-left: 0; 
                    }

                    .icon {
                        margin-top: 30px;
                        margin-bottom: 50px;
                        text-align: center;
                    }

                    .item {
                        margin-bottom: 20px;

                        .name {
                            display: flex;
                            justify-content: space-between;
                            font-size: 16px;
                            color: #fff;
                            margin-bottom: 20px;
                        } 
                    }

                    .title-box + .item {
                        margin-top: 60px;
                    }

                    .tips {
                        margin-top: 40px;
                        color: #8091B7;
                        font-size: 14px;
                        line-height: 1.5;
                    }
                }

                .tabs {
                    padding-right: 58px;
                    text-align: right;
                    margin-bottom: 10px;

                    button {
                        background: none;
                        border-color: #348efc;
                        color: #348efc;
                        margin: 0;
                        padding: 7px 25px;
                        border-radius: 0;
                        border-right: 0;

                        &:last-child {
                            border-right: 1px solid #348efc;
                        }
                    }

                    .live {
                        background: #348efc;
                        color: #fff;
                    }
                }

                .data {
                    height: 500px;

                    .line {
                        max-width: 100%;
                        height: 100%;
                    }
                }

                .el-progress-bar {
                    margin-right: 0;
                    padding-right: 0;
                }

                .el-progress-bar__outer {
                    height: 28px !important;
                    border-radius: 0;
                    background: #314062;
                }

                .el-progress-bar__inner {
                    border-radius: 0;
                }
            }

            .up-user,
            .new-user,
            .research-top {
                margin-top: 20px;
                overflow: hidden;
                background-color: #283656;

                .list {
                    border-top: 1px solid #4B5B7F;

                    li {
                        display: inline-block;
                        padding: 0 20px 0 38px;
                        width: 33.3%;
                        height: 62px;
                        line-height: 62px;
                        border-right: 1px solid #4B5B7F;
                        border-bottom: 1px solid #4B5B7F;
                        box-sizing: border-box;

                        &:nth-of-type(3n) {
                            border-right: 0;
                        }

                        .item {
                            display: flex;
                            justify-content: space-between;

                            .name {
                                color: #fff;
                                font-size: 14px;

                                span {
                                    display: inline-block;
                                    width: 40px;
                                    height: 40px;
                                    line-height: 40px;
                                    border-radius: 50%;
                                    margin-right: 14px;
                                    text-align: center;
                                    font-size: 16px;
                                    background: #38959D;
                                }
                            }

                            .time {
                                font-size: 12px;
                                color: #6B82B4;
                            }
                        }
                    }
                }
             }
        }
    }
}
</style>
